<template>
  <div>
    <div v-if="info.total !== 0">
      <p class="total">共<span>{{info.total}}</span>笔</p>
      <ul class="lists">
        <li class="child" v-for="(list, index) in info.lists" :key="index">
          <router-link :to="'/mine/aheadrepay/' + list.user_loan_id">
            <div class="info hairlines-bottom">
              <div>
                <p class="money">￥{{list.surplus_principal}}</p>
                <p class="note">未还本金</p>
              </div>
            </div>
            <div class="date">
              {{list.loan_time}} 借款{{list.loan_money}}元
              <span class="right">剩余<i>{{list.surplus_cycle}}</i>期</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="none" v-else>
      <img :src="nothingImage">
      <p>没有提前还款的信息哦</p>
    </div>
    <footer class="form-footer">
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  // 提前还款列表
  import nothing from './img/none.png'

  export default {
    name: 'repayList',
    data () {
      return {
        title: '我的丰期',
        nothingImage: nothing
      }
    },
    computed: {
      info: function () {
        return this.$store.state.preRepay
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      }
    },
    created () {
      this.setTitle(this.title)
      this.api.getRepayList()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .total{
    padding: rem(30) rem(24) rem(20);
    font-size: rem(26);
    color: #999;
    span{
      font-size: rem(28);
      margin: 0 2px;
    }
  }
  .lists{
    margin-bottom: rem(100);
  }
  .child{
    background: #fff;
    margin-bottom: rem(15);
    padding: 0 rem(24);
    .info{
      padding: rem(30) 0 rem(20);
      font-size: rem(30);
      color: #141414;
      display: flex;
      justify-content: space-between;
      .checkbox{
        width: 20%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        input{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
        label{
          position: relative;
          display: block;
          width: rem(50);
          height: rem(50);
          border-radius: 50%;
          border: 2px solid #e6e6e6;
          transition: all .4s;
        }
        input:checked + label{
          background: #72a5ef;
          border: 0;
          &:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: rem(20);
            height: rem(10);
            border-left: 3px solid #fff;
            border-bottom: 3px solid #fff;
            transform: rotate(-45deg);
          }
        }
      }
    }
    .money{
      font-weight: 700;
    }
    .note{
      margin-top: rem(5);
      color: #999;
    }
    .date{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: rem(80);
      font-size: rem(28);
      color: #999;
    }
    .right{
      color: #e2e2e2;
      i{
        font-size: rem(34);
      }
    }
  }
  .form-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .none{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: rem(90);
    background: #fff;
    font-size: rem(28);
    color: #333;
    text-align: center;
    img{
      display: block;
      margin: rem(150) auto rem(40) auto;
      width: rem(340);
      height: rem(300);
    }
    a{
      color: #72a5ef;
    }
  }
</style>
